import React, { Component } from 'react'
import { Modal, Radio, Input } from 'antd';
import { DatePicker } from 'antd';
const { RangePicker } = DatePicker;
const RadioGroup = Radio.Group;

export default class DateOption extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            options: [],

            columnKey: '',
            maxName: '',    //最大值， 选择小于时使用；选择范围时大值使用
            minName: '',    //最小值， 选择大于时使用；选择范围时小值使用
            radioValue: 'gt',
            gt: '',
            bt: '',
            lt: '',
            eq: ''
        };
    }
    componentDidMount(){

    }

    showModal = (searchColumnItem) => {
        this.setState({
            visible: true,
            columnKey: searchColumnItem.name,
            maxName: searchColumnItem.maxName,
            minName: searchColumnItem.minName,
        });
    }
    handleOk = () => {
        this.setState({
            visible: false,
        });
        let radioValue = this.state.radioValue;
        let inputValue = this.state[radioValue];
        let viewCondition = radioValue + ":" + inputValue;
        let searchCondition = {};
        searchCondition[this.state.columnKey] = '';
        searchCondition[this.state.minName] = '';
        searchCondition[this.state.maxName] = '';
        if(radioValue === 'gt'){
            searchCondition[this.state.minName] = inputValue;
        }else if(radioValue === 'bt'){
            if(inputValue!= '' && inputValue!=null && typeof inputValue != 'undefined'){
                searchCondition[this.state.minName] = inputValue[0];
                searchCondition[this.state.maxName] = inputValue[1];
            }
        }else if(radioValue === 'lt'){
            searchCondition[this.state.maxName] = inputValue;
        }else if(radioValue === 'eq'){
            searchCondition[this.state.columnKey] = inputValue;
        }
        this.props.dateCallback(searchCondition, viewCondition);
    }
    handleCancel = () => {
        this.setState({
            visible: false,
        });
    }
    onChange = (e) => {
        this.setState({
            radioValue: e.target.value,
        });
    }
    onDateChange = (type, date, dateString) => {
        if(type === 'gt'){
            this.setState({
                gt: dateString
            });
        }else if(type === 'bt'){
            this.setState({
                bt: dateString
            });
        }else if(type === 'lt'){
            this.setState({
                lt: dateString
            });
        }else if(type === 'eq'){
            this.setState({
                eq: dateString
            });
        }
    }

    render() {
        const radioStyle = {
            display: 'block',
            height: '50px',
            lineHeight: '50px',
        };
        //eq相等 ne、neq不相等， gt大于， lt小于 gte、ge大于等于 lte、le 小于等于 not非 mod求模 等
        return(
            <div>
                <Modal
                    title="时间查询"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确定"
                    cancelText="取消"
                >
                    <RadioGroup onChange={this.onChange} value={this.state.radioValue}>
                        <Radio style={radioStyle} value="gt">大于<DatePicker size="large" showTime format="YYYY-MM-DD HH:mm:ss" disabled={this.state.radioValue !== 'gt'} onChange={this.onDateChange.bind(this, 'gt')} style={{ marginLeft: 10 }} /></Radio>
                        <Radio style={radioStyle} value="bt">之间<RangePicker size="large" showTime format="YYYY-MM-DD HH:mm:ss" disabled={this.state.radioValue !== 'bt'} onChange={this.onDateChange.bind(this, 'bt')} style={{ marginLeft: 10 }} /></Radio>
                        <Radio style={radioStyle} value="lt">小于<DatePicker size="large" showTime format="YYYY-MM-DD HH:mm:ss" disabled={this.state.radioValue !== 'lt'} onChange={this.onDateChange.bind(this, 'lt')} style={{ marginLeft: 10 }} /></Radio>
                        <Radio style={radioStyle} value="eq">等于<DatePicker size="large" showTime format="YYYY-MM-DD HH:mm:ss" disabled={this.state.radioValue !== 'eq'} onChange={this.onDateChange.bind(this, 'eq')} style={{ marginLeft: 10 }} /></Radio>
                    </RadioGroup>
                </Modal>
            </div>
        )
    }
}
